<template>
  <div class="create_instruction_wrap">
    <div class="head">
      <el-button icon="el-icon-arrow-left" style="width:70px;padding:0px;height:36px;" @click="goBack">返回</el-button>
      <span
        style="float:right;display:inline-block;min-width:300px;text-align:right"
      >当前位置：监督举报 / 请示报告 / 创建请示报告</span>
    </div>
    <div class="report_name">
      <span style="font-size:14px;color:#333">报告名称：</span>
      <el-input
        v-model="param.name"
        placeholder="请输入报告名称"
        style="width:460px;margin-left:10px;height:36px;padding: 0;"
        clearable
      ></el-input>
    </div>
    <div class="attach_select_wrap">
      <div class="title">
        <span
          style="display:inline-block;width:4px;height:14px;background:#3D7FFF;transform:translateY(2px)"
        ></span>
        <span style="font-size:16px;color:#333;font-weight: 600;margin-left:10px">附件</span>
        <span
          style="display:inline-block;font-size:12px;color:#999;margin-left:12px;transform:translateY(-1px)"
        >文件仅支持PDF格式</span>
        <el-upload
          class="upload-demo"
          multiple
          style="width:70px;padding:0px;height:30px;float:right;"
        >
          <el-button size="small" style="width:70px;padding:0px;height:30px;float:right;">点击上传</el-button>
        </el-upload>
        <!-- <el-button style="width:70px;padding:0px;height:30px;float:right;" type="multiple">上传文件</el-button> -->
      </div>
      <div class="attach_add_wrap">
        <div class="taskBotSonFile" v-show="fileList.length>0">
          <div class="taskMidFileConter" v-for="(item,index) in fileList" :key="index">
            <div class="taskMidFileConterSon">
              <div class="taskMidFileConterSonLeft">
                <img src="@/assets/image/pdf.png" />
              </div>
              <div class="taskMidFileConterSonRight">
                <div class="sonRightTop">{{item.name}}</div>
                <div class="sonRightBot">
                  <div class="sonRightBotLeft">{{item.size}}</div>
                  <div class="sonRightBotRight">
                    <img
                      class="sonRightBotRightImg"
                      src="@/assets/image/preview.png"
                      @click="previewFile(item.id)"
                    />
                    <div class="sonRightBotRightText">预览</div>
                    <div class="sonRightBotRightLine"></div>
                    <img
                      class="sonRightBotRightInmage"
                      src="@/assets/image/download.png"
                      @click="downloadFile(item.id)"
                    />
                    <div class="sonRightBotRightText">下载</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="taskBotSonFileDel" @click="delFile(index)" icon="el-icon-close">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </div>
        <div
          style="height:46px;font-size:14px;line-height:26px;color:#999999;padding-bottom:20px"
          v-show="fileList.length==0"
        >暂无附件</div>
      </div>
    </div>
    <div class="bottom_wrap">
      <div style="float:right;margin-top:10px">
          <el-button style="width:70px;padding:0px;height:36px;float:right;margin-left:20px">取消</el-button>
          <el-button type="primary" style="width:70px;padding:0px;height:36px">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [
        {
          id: "1",
          name: "举报文档信息01.PDF",
          size: "11.6M",
        },
        {
          id: "2",
          name: "举报文档信息02.PDF",
          size: "11.6M",
        },
        {
          id: "3",
          name: "举报文档信息03.PDF",
          size: "11.6M",
        },
        {
          id: "4",
          name: "举报文档信息04.PDF",
          size: "11.6M",
        },
        {
          id: "5",
          name: "举报文档信息05.PDF",
          size: "11.6M",
        },
      ],
      param: {
        name: "",
      },
    };
  },
  methods: {
    delFile(index) {
      this.fileList.splice(index, 1);
    },
    goBack(){
        this.$router.push({name:'Instructions'})
    }
  },
};
</script>
<style lang="less" scoped>
.create_instruction_wrap {
  width: 100%;
  min-width: 800px;
  height: 100%;
  position: relative;
  .head_wrap {
    min-width: 500px;
  }

  .report_name {
    margin-top: 20px;
    background: #fff;
    height: 84px;
    line-height: 84px;
    padding: 0 24px;
    /deep/ .el-input__inner {
      height: 36px;
    }
  }
  .attach_select_wrap {
    margin-top: 10px;
    background: rgba(255, 255, 255, 1);
    padding: 24px 24px 0 24px;
    .title {
      height: 22px;
      line-height: 22px;
    }
    .attach_add_wrap {
      padding-top: 20px;
      .taskBotSon {
        display: flex;
        justify-content: space-between;

        .taskMidName {
          height: 18px;
          display: flex;
          align-items: center;

          .taskMidNameLeft {
            width: 4px;
            height: 14px;
            background: #3d7fff;
            margin-right: 10px;
          }

          .taskMidNameRight {
            font-weight: 600;
            color: #333333;
            font-size: 16px;
            line-height: 16px;
          }

          .taskMidNameInfo {
            width: 128px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 17px;
            margin-left: 12px;
          }
        }

        .taskMidUpload {
          width: 70px;
          height: 30px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          border: 1px solid rgba(61, 127, 255, 1);
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(61, 127, 255, 1);
          line-height: 22px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }

      .taskBotSonFile {
        margin-right: 20px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .taskMidFileConter {
          height: 80px;
          width: 350px;
          border: 1px #dddddd solid;
          border-radius: 4px;
          margin-right: 10px;
          margin-bottom: 10px;
          position: relative;

          .taskMidFileConterSon {
            height: 50px;
            margin: 15px;
            display: flex;

            .taskMidFileConterSonLeft {
              height: 50px;
              width: 50px;

              img {
                height: 50px;
                width: 50px;
              }
            }

            .taskMidFileConterSonRight {
              width: 265px;
              height: 50px;
              margin-left: 15px;

              .sonRightTop {
                height: 32px;
                color: #333333;
                font-size: 16px;
                line-height: 16px;
                display: flex;
                align-items: center;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
              }

              .sonRightBot {
                height: 25px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .sonRightBotLeft {
                  width: 70px;
                  height: 16px;
                  color: #999999;
                  font-size: 14px;
                  line-height: 16px;
                }

                .sonRightBotRight {
                  width: 150px;
                  height: 16px;
                  color: #3d7fff;
                  font-size: 14px;
                  line-height: 16px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;

                  .sonRightBotRightImg {
                    height: 12px;
                    width: 16px;
                    cursor: pointer;
                  }

                  .sonRightBotRightText {
                    height: 16px;
                    width: 30px;
                    margin-left: 5px;
                  }

                  .sonRightBotRightLine {
                    margin-left: 15px;
                    margin-right: 15px;
                    width: 1px;
                    height: 12px;
                    background: #cccccc;
                  }

                  .sonRightBotRightInmage {
                    height: 12px;
                    width: 14px;
                    cursor: pointer;
                  }
                }
              }
            }
          }

          .taskBotSonFileDel {
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            background: rgba(204, 204, 204, 1);
            border-radius: 16px;
            color: #ffffff;
            padding-bottom: 4px;

            position: absolute;
            top: 2px;
            right: 2px;
            cursor: pointer;
          }
        }

        .taskBotNoFile {
          width: 56px;
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 20px;
        }
      }
    }
  }
  .bottom_wrap {
    position: absolute;
    width: 100%;
    background: #fff;
    height: 56px;
    bottom: -20px;
    margin-top: 8px;
  }
}
</style>